/* FilterBar.css */
.filter-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.55rem 1.4rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  font-family: var(--font-sans);
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.18s ease,
    box-shadow 0.22s ease;
}

.filter-btn:hover:not(.filter-btn--active) {
  background-color: var(--color-hover-vivid);
  border-color: var(--color-hover-vivid);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 37, 7, 0.18);
}

.filter-btn--active {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: 0 3px 10px rgba(139, 69, 19, 0.3);
  transform: none;
}

.filter-btn--active:hover {
  background-color: var(--color-hover-vivid);
  border-color: var(--color-hover-vivid);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .filter-bar {
    gap: 0.3rem;
    margin-bottom: var(--space-md);
  }

  .filter-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.72rem;
  }
}